<template lang="">
  <div class="baiduClues">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <div class="title">状态搜索</div>
      <el-form-item label="是否重复转化ID">
        <el-select
          v-model="queryParams.is_repeat"
          placeholder="请选择"
          clearable
          style="width: 180px"
          clearable
        >
          <el-option label="全部" value="" />
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="加微状态">
        <el-select
          v-model="queryParams.is_wechat"
          placeholder="请选择"
          clearable
          style="width: 180px"
          clearable
        >
          <el-option label="全部" value="" />
          <el-option label="已加微" value="1" />
          <el-option label="未加微" value="0" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="线索时间" >
        <el-date-picker
          v-model="queryParams.time"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
          popper-class="no-clear"
        >
        </el-date-picker>
      </el-form-item>
      <br />
      <div class="title">落地页参数</div>
      <el-form-item label="广告计划ID">
        <el-input
          v-model="queryParams.put_plan"
          placeholder="请输入"
          style="width: 180px"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="账户名称">
        <el-input
          v-model="queryParams.account_name"
          placeholder="请输入"
          style="width: 180px"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="账户ID">
        <el-input
          v-model="queryParams.account_id"
          placeholder="请输入"
          style="width: 180px"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="转化ID">
        <el-input
          v-model="queryParams.bd_vid"
          placeholder="请输入"
          style="width: 300px"
          clearable
        ></el-input>
      </el-form-item>
      <br />
      <div class="title">用户信息</div>
      <el-form-item label="社群老师">
        <el-select
          v-model="queryParams.user_ids"
          multiple
          filterable
          clearable
          collapse-tags
          placeholder="请选择"
          clearable
          style="width: 180px"
          clearable
        >
          <el-option
            v-for="item in teacherList"
            :key="item.wx_user_id"
            :label="item.name"
            :value="item.wx_user_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="table-total">
      数据统计：加V量：<span>{{total_wechat}}</span>重复比率：<span>{{repeat_ratio}}%</span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    :tree-props="{children: 'child'}"
     row-key="id"
      v-loading="loading"
    >
      <el-table-column
        prop="type"
        label="路径"
        fixed
        width="180"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="teacher_wechat_name"
        fixed
        label="社群老师"
        width="180"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="account_name"
        fixed
        width="180"
        label="账户名称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="account_id"
        fixed
        width="180"
        label="账户ID"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="bd_vid"
        fixed
        width="180"
        label="转化ID"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="commit_time"
        fixed
        width="180"
        label="线索时间"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="is_wechat_title"
        width="180"
        label="加微状态"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_wechat == '1'">已加微</el-tag>
          <el-tag type="danger" v-else>未加微</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="plan_id"
        width="180"
        label="广告计划ID"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="channel_name"
        width="180"
        label="渠道名称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="channel_id"
        width="180"
        label="渠道ID"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="site_name"
        width="180"
        label="站点名称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="site_id"
        width="180"
        label="站点ID"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        width="180"
        label="用户昵称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        width="180"
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="is_repeat"
        width="180"
        label="重复用户"
        :show-overflow-tooltip="true"
        align="center"
      >
      <template slot-scope="scope">
      <el-tag v-if="scope.row.is_repeat == '1'">是</el-tag>
      <el-tag type="danger" v-else>否</el-tag>
      </template>
      </el-table-column>
      <el-table-column
        prop="order_wechat_time"
        width="180"
        label="加微时间"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="pay_state_title"
        width="180"
        label="支付状态"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="order_pay_time"
        width="180"
        label="支付时间"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="order_create_time"
        width="180"
        label="下单时间"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="order_code"
        width="180"
        label="订单编号"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { getTeacher } from "@/api/teacher";
import { getBaiduClue } from "../../api/baiduClues";
export default {
  data() {
    return {
      loading: true, // 遮罩层
      queryParams: {
        page: 1,
        pageSize: 20,
        time: [],
      },
      teacherList: [],
      tableData: [],
      total: 0,
      repeat_ratio:0,
      total_wechat:0
    };
  },
  created() {
    this.getTeacherList();
    this.getDefaultTime();
    this.getList();
  },
  methods: {
    getDefaultTime() {
      var d = new Date();
      var year = d.getFullYear();
      var month = d.getMonth() + 1;
      var day = d.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      this.queryParams.time = [
        year + "-" + month + "-" + day + " " + "00" + ":" + "00" + ":" + "00",
        year + "-" + month + "-" + day + " " + "23" + ":" + "59" + ":" + "59",
      ];
    },
    getList() {
      this.loading = true;
      let seachObj = JSON.parse(JSON.stringify(this.queryParams));
      if (!seachObj.time) {
        seachObj.begin_time = "";
        seachObj.end_time = "";
      } else if (seachObj.time.length == 2) {
        seachObj.begin_time = seachObj.time[0];
        seachObj.end_time = seachObj.time[1];
      }
      delete seachObj.time;
      getBaiduClue(seachObj).then((res) => {
        this.total = res.data.total
        this.tableData=res.data.data
        this.repeat_ratio=res.data.statistics.repeat_ratio*100
        this.total_wechat=res.data.statistics.total_wechat
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        page: 1,
        pageSize: 20,
      };
      this.getDefaultTime();
      this.handleQuery();
    },
    getTeacherList() {
      getTeacher().then((res) => {
        this.teacherList = res.data;
      });
    },
  },
};
</script>
<style lang="scss">
.no-clear {
  .el-picker-panel__footer .el-picker-panel__link-btn.el-button--text {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .el-select .el-tag{
    max-width: 75%;
}
::v-deep .el-select__tags{
    flex-wrap: nowrap;
}
::v-deep .el-table__body-wrapper {
  z-index: 2;
}

.baiduClues {
  margin: 20px;

  .title {
    width: 100%;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
    color: black !important;
  }

  .table-total {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color:#ecf5ff;
    padding-left: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 600;

    span {
      font-weight: 600;
      color: #409eff;
      margin-right: 40px;
    }
  }
}
</style>
